<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css引入方式</title>
    <link rel="stylesheet" href="test.css">
    <style>
        p{
            color:blue;
        }
    </style>

    <!--<style>-->
        <!--@import "test.css";-->
    <!--</style>-->
</head>
<body>
<!--
    想要为HTML文档添加CSS效果,需要引入对应的CSS样式
    引入方式主要分为三种
    1.行内式
        在元素属性中通过style属性为当前元素赋予指定的样式
        style属性值的格式为:
            样式名:样式值;样式名2:样式值2;....
        该方式只能为某一个元素设置指定的样式
    2.内联样式/内部样式
        可以为当前HTML文档中符合指定规则的多个元素设置统一的样式
        在head标签中定义一个子标签style
        在style中编写CSS
            语法:
                选择器{
                    样式名:样式值;
                    样式名:样式值;
                    ...
                }
    3.外部引入
        (1)在当前项目中定义一个以.css结尾的文件
          在该文件中编写css代码,其中的代码与style标签中的代码格式一致
        (2)在当前HTML文档中引入编写好的CSS文件
          有两种引入方式
          (a):link标签引入
            在head标签中创建一个link标签
            通过href属性指定已有的css文件地址
          (b):通过@import的方式进行引入
            在style标签体中使用@import语句
            语法:@import "css文件地址"

    优先级问题
        对于内部样式与外部引入,两者没有优先级的概念
        相当于同时存在,谁在后面会将前面的样式覆盖
        对于行内式而言,优先级最高
        只要有行内式在,生效的都是行内式
        除非破坏了优先级
        在对应样式值后添加关键字!important
        则表示不管其他地址是否设置了相同的样式
        生效的一定是当前样式
-->
<p style="color:red;">第1个段落</p>
<p style="color:green;">第2个段落</p>
<p>第3个段落</p>
<p>第4个段落</p>
<p>第5个段落</p>
<hr>
<div>第1个div</div>
<div>第2个div</div>
<div>第3个div</div>
<div>第4个div</div>
<div>第5个div</div>
</body>
</html>